<template>
    <div>
        <!--查询条件及按钮-->
        <div>
            <el-form :inline="true" :model="data1" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="data1.name" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="RolesQuery()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-circle-check" @click="dialogTableVisible = true">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" icon="el-icon-circle-check" @click="dialogTableVisibles = true">修改</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" icon="el-icon-circle-check" @click="IsDelete()">删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--角色显示-->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="Name" label="角色名称" width="120"> </el-table-column>
            <el-table-column prop="Roledescription" label="角色描述" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="Status" label="角色状态" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.Status == 0">正常</span>
                    <span v-if="scope.row.Status == 1">禁用</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="danger" icon="el-icon-delete-solid" size="small">删除</el-button>
                    <el-button @click="updates(scope.row)" type="warning" icon="el-icon-edit" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--添加角色-->
        <div>
            <el-dialog title="添加角色" :visible.sync="dialogTableVisible">
                <el-form :model="form" :rules="rules">
                    <el-form-item label="角色名称" prop="Name">
                        <el-input v-model="form.Name"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="Roledescription">
                        <el-input v-model="form.Roledescription"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="Status">
                        <el-switch
                            v-model="form.Status"
                            active-text="正常"
                            inactive-text="禁用"
                            :active-value="0"
                            :inactive-value="1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        >
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="权限" >
                        <el-tree
                            style="margin-top: 20px"
                            :data="treeData"
                            ref="tree"
                            show-checkbox
                            node-key="Id"
                            default-expand-all
                            :default-checked-keys="checkedArray"
                            :props="{ label: 'Name', children: 'children' }"
                        >
                        </el-tree>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onAdd()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--修改角色-->
        <div>
            <el-dialog title="修改角色" :visible.sync="dialogTableVisibles">
                <el-form :model="forms" :rules="rules">
                    <el-form-item label="角色名称" prop="Name">
                        <el-input v-model="forms.Name"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="Roledescription">
                        <el-input v-model="forms.Roledescription"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="Status">
                        <el-switch
                            v-model="forms.Status"
                            active-text="正常"
                            inactive-text="禁用"
                            :active-value="0"
                            :inactive-value="1"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        >
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableVisibles = false">取 消</el-button>
                    <el-button type="primary" @click="Update()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data1.pageIndex"
            :page-sizes="[1, 2, 3, 4, 5]"
            :page-size="data1.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
        >
        </el-pagination>
    </div>
</template>
  
  <script>
import { Roles, RoleDelete, RoleInsert, RoleUpdate, RoleDeleteAll } from '@/api/Roles.js';
import { PermissionsAll } from '@/api/Permissions.js';
export default {
    data() {
        return {
            tableData: [],
            data1: {
                pageIndex: 1,
                pageSize: 10,
                name: ''
            },
            forms: {
                Name: '',
                Roledescription: '',
                Status:0
            },
            form: {
                Name: '',
                Roledescription: '',
                Status: 0,
                PermissionId:[],
            },
            treeData: [],
            props: {
                label: 'Name',
                children: 'children'
            },
            checkedArray:[],
            recordCount: 0,
            dialogTableVisible: false,
            multipleSelection: [],
            dialogTableVisibles: false,
            rules: {
                Name: [{ required: true, message: '请输入角色', trigger: 'blur' }],
                Roledescription: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.RolesQuery();
        this.PerAll();

    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //角色显示
        RolesQuery() {
            Roles(this.data1).then((res) => {
                this.tableData = res.Data.plist;
                this.recordCount = res.Data.recordCount;
            });
        },
        // //保存分配的权限
        // savePermission() {
            
        // },
        //删除
        handleClick(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    RoleDelete({ id: row.Id }).then((res) => {
                        //console.log(res);
                        this.$message({
                            type: 'success',
                            message: res.Message
                        });
                        this.RolesQuery();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: res.Message
                    });
                });
        },
        //分页
        handleSizeChange(val) {
            this.data1.pageSize = val;
            this.RolesQuery();
        },
        handleCurrentChange(val) {
            this.data1.pageIndex = val;
            this.RolesQuery();
        },
        //添加
        onAdd() {
            if(this.checkedRoleId==undefined){
                this.$message.warning('请选择角色');
                return;
            }
            //获取选中的叶子结点
            this.checkedArray = this.$refs.tree.getCheckedKeys(true);
            let forms= [
                Name= this.form.Name,
                Roledescription=this.form.Roledescription,
                Status=this.form.Status,
                PermissionId=this.checkedArray,
            ];
            console.log(forms);
            //调用后台接口
            //console.log(this.form)
            RoleInsert(forms).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.RolesQuery();
                    this.dialogTableVisible = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        //角色修改
        Update() {
            // console.log(this.forms);
            RoleUpdate(this.forms).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.dialogTableVisibles = false;
                    this.RolesQuery();
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        PerAll() {
            PermissionsAll({ Pid: 0 }).then((res) => {
                //  console.log(res);
                this.per = res;
            });
        },
        //反填角色信息
        updates(row) {
            this.forms = row;
            // console.log(this.forms);
            this.dialogTableVisibles = true;
            // RoleSelectId(row).then((res) => {
            //     this.forms = res.Data;
            // });
        },
        //批量删除
        IsDelete() {
            let ids = [];
            if (this.multipleSelection.length <= 0) {
                this.$message.warning('请至少选择一项');
                return;
            }
            //将复选框选择的角色的Id存放到Ids数组中
            multipleSelection.forEach((element) => {
                ids.push(element.Id);
            });
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    RoleDeleteAll({ idList: Ids }).then((res) => {});
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: res.Message
                    });
                });
        }
    }
};
</script>